<template>
  <div>

  </div>
</template>

<script>
import * as Three from 'three'
import OrbitControls from 'three-orbitcontrols'
import {OBJLoader,MTLLoader } from 'three-obj-mtl-loader'
export default {
  name: "index",
  data() {
    return {
      // 相机
      camera: null,
      // 场景
      scene: null,
      // 渲染器对象
      renderer: null,
      // 材质对象
      mesh: [],
      controls:null,
      resultName: ''
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init () {
      let group = new Three.Group();
      // 相机位置
      let width=window.innerWidth;
      let height=window.innerHeight;
      // 创建场景
      this.scene = new Three.Scene();
      let k = width/height;
      let s = 150;
      // 正交相机
      // this.camera = new Three.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
      this.camera  = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      this.camera.position.set(80, 100, 60);
      this.camera.lookAt(new Three.Vector3(1, 80, 0));
      this.scene.add(this.camera);
      // 创建点光源.0xABEBFE 指模型的颜色
      // let light=new Three.DirectionalLight(0xffaaff);
      let light=new Three.DirectionalLight(0xABEBFE);
      light.position.set(80,100,60);
      // light.position.set(0, 1, 0);
      this.scene.add(light);
      // 创建渲染器    antialias：抗锯齿
      this.renderer = new Three.WebGLRenderer({antialias: true})
      this.renderer.setSize(width, height)
      // 背景色，原先默认是黑色
      this.renderer.setClearColor("#FFFFFF");
      document.body.appendChild(this.renderer.domElement);
      // 创建控件对象     OrbitControls：轨道控制
      this.controls=new OrbitControls(this.camera,this.renderer.domElement);
      this.controls.addEventListener('change',this.animate);
      this.loadRen();
      this.useClick2();
      group.scale.set(2,2,2);
    },
    loadRen() {
      let that=this;
      // 加载obj和mtl模型
      let mtlLoader = new MTLLoader();
      mtlLoader.setPath("static/obj/male02/");
        mtlLoader.load(`male02.mtl`, function(materials) {
          materials.preload();
          let objLoader = new OBJLoader();
          objLoader.setMaterials(materials)
          objLoader.load(`static/obj/male02/male02.obj`, function(obj) {
            that.mesh = obj
            that.scene.add(obj);
            that.animate();
          })
        })

    },
    useClick2() {
      var that = this
      var raycaster = new Three.Raycaster(); //光线投射，用于确定鼠标点击位置
      var mouse = new Three.Vector2(); // 创建二维平面
      this.renderer.domElement.addEventListener("mousedown", (event) => {
        // mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        // mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        mouse.x = ((event.clientX - this.renderer.domElement.offsetLeft) / this.renderer.domElement.clientWidth) * 2 - 1; // dom.offsetLeft -- dom元素距离浏览器左侧的距离   dom.clientWidth -- dom元素宽度
        mouse.y = -((event.clientY - this.renderer.domElement.offsetTop) / this.renderer.domElement.clientHeight) * 2 + 1; // dom.offsetTop -- dom元素距离浏览器顶部的距离    dom.clientHeight -- dom元素高度

        raycaster.setFromCamera(mouse, this.camera);
        var intersects = raycaster.intersectObjects(that.mesh.children);
        var nameArr = []
        if (intersects.length > 0) {
          for (let j = 0; j < intersects.length; j++) {
            var obj = intersects[j].object
            console.log(333,obj)
            nameArr.push(obj.name)
            that.resultName = nameArr[0]
            // 使物体变色
              if (obj.name === that.resultName) { // 过滤，防止下层物体也被重置颜色
                obj.material.color.set("#ff0000");
                // 重新渲染，使得点击后立马生效
                that.animate();
                console.log(555, that.resultName)
              }
          }
        }
      })

    },
    animate () {
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>

<style scoped>
#container {
  height: 800px;
}
#three{
  height:800px;
}
</style>
